<template>
  <div class="user">
    <div class="contain-header">
      <span>用户列表<i class="arrow"></i></span>
    </div>
    <div class="contain-body clearfix">
      <div class="all-cont">
        <div class="top-input">
          <el-form ref="form" :model="form">
            <el-form-item>
              <div class="grid-content bg-purple" style="margin-left: 0">
                <span class="text-title pull-left">用户类型：</span>
                <el-select v-model="form.user_type" class="pull-left" placeholder="请选择">
                  <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </div>
              <div class="grid-content bg-purple">
                <span class="text-title pull-left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注册账号：</span>
                <el-input style="width: 200px;" class="pull-left"  placeholder="请输入内容" v-model='form.login'></el-input>
              </div>
              <div class="el-button el-button--theme pull-left" @click='getComList'>搜索</div>
              <div class="el-button el-button--theme pull-right" @click="handleAdd">新增用户</div>
            </el-form-item>
          </el-form>
          <!--<div class="user-type">-->
            <!--<span class="text-title">用户类型：</span>-->
            <!--<el-select v-model="value" placeholder="请选择">-->
              <!--<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.label"></el-option>-->
            <!--</el-select>-->
          <!--</div>-->
          <!--<div class="block" style="margin-left: 110px">-->
            <!--<span class="demonstration">提交时间：</span>-->
              <!--<el-date-picker v-model="editForm.addtime" type="daterange" format="yyyy-MM-dd" :picker-options="pickerOptions0" placeholder="选择日期范围"></el-date-picker>-->
          <!--</div>-->
          <!--<div class="user-type float-r">是否申请企业认领：-->
            <!--<el-select v-model="aab" placeholder="请选择">-->
              <!--<el-option v-for="ok in oks" :key="ok.num" :label="ok.name" :value="ok.num"></el-option>-->
            <!--</el-select>-->
          <!--</div>-->
        </div>

        <!--列表-->
        <div class="list-cont normal-shadow">
          <el-table :data="userData" border style="width: 100%" v-loading="listLoading">
            <el-table-column prop="login_id" label="用户编号" width="180"></el-table-column>
            <el-table-column prop="login" label="注册账号" width="180"></el-table-column>
            <el-table-column label="类型">
              <template scope="scope">
                {{mapping(scope.row.user_type, options, 'id', 'name')}}
              </template>
            </el-table-column>
            <el-table-column prop="addtime" label="注册时间"></el-table-column>
            <!--<el-table-column prop="stat" label="是否申请企业认领"></el-table-column>-->
            <el-table-column label="操作">
              <template scope="scope">
                <el-button class="bj-btn" size="small" @click="handleEdit(scope.$index, scope.row)"><i class='glyphicon glyphicon-edit'></i></el-button>
                <el-switch v-model="scope.row.stat" style="width: 46px;padding-top: 6px;" @change="changeNum(scope.row.stat, scope.row.login_id)" off-text="" on-text="" :on-value="1" :off-value="2"></el-switch>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!--新增用户-->
        <el-dialog title="新增用户" v-model="addFormVisible" style="width: 694px;margin: 0 auto;" :close-on-click-modal="false">
          <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
            <el-form-item label="用户类型">
              <el-select v-model="addForm.user_type" placeholder="请选择">
                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="注册账号">
              <el-input v-model="addForm.login" ></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="addForm.password" type="password" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码">
              <el-input v-model="checkPassword" type="password" auto-complete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click.native="addFormVisible = false">取消</el-button>
            <el-button type="primary" @click.native="addSubmit" :loading="editLoading">提交</el-button>
          </div>
        </el-dialog>

        <!--编辑界面-->
        <el-dialog title="编辑" v-model="editFormVisible" style="width: 694px;margin: 0 auto;" :close-on-click-modal="false">
        <el-form :model="editForm" label-width="80px" ref="editForm">
            <el-form-item label="用户类型">
              <el-select v-model="editForm.user_type" placeholder="请选择">
                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="注册账号">
              <el-input v-model="editForm.login" disabled="disabled"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input type="password" v-model="editForm.password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="password">
              <el-input type="password" v-model="checkPassword"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click.native="editFormVisible = false">取消</el-button>
            <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
          </div>
        </el-dialog>

        <!--分页-->
        <div class="pagination">
          <el-pagination
            @current-change="handleCurrentChange" :page-size="page" layout="prev, pager, next, jumper" :total="totalPage">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'user',
    data () {
      return {
        form: {
          page: 1,
          user_type: ''
        },
        pickerOptions0: {
          disabledDate (time) {
            return time.getTime() > Date.now() - 8.64e7
          }
        },
        addFormRules: {
          login: [
            { required: true, message: '请输入账号', trigger: 'blur' }
          ]
        },
        addForm: {},
        editForm: {},
        userData: [],
        oks: [{num: 'all', name: '全部'}, {num: 'yes', name: '是'}, {num: 'no', name: '否'}],
        options: [],
        stat: '',
        checkPassword: '',
        page: 1,
        aab: '',
        totalPage: 1,
        addFormVisible: false, // 新增界面是否显示
        editFormVisible: false, // 编辑界面是否显示
        editLoading: false,
        addLoading: false,
        listLoading: false,
        params: {
          page: 1
        }
      }
    },
    methods: {
      getComList () {
        this.listLoading = true
        this.$http('get', 'user', this.form)
        .then((data) => {
          this.userData = data.result.dataList
          var total = data.result.total % 10 === 0 ? parseInt(data.result.total / 10) : parseInt(data.result.total / 10) + 1
          this.totalPage = total
          this.listLoading = false
//          this.getUsers()
        })
      },
      mapping (id, array, name1, name2) {
        let needName
        array.forEach(function (item) {
          if (item[name1] === id) {
            needName = item[name2]
            return
          }
        })
        return needName
      },
      getLevelType () {
        this.$http('get', 'level')
          .then((data) => {
            this.options = data.result
          })
      },
      // 显示编辑界面
      handleEdit: function (index, row) {
        this.editFormVisible = true
        this.editForm = Object.assign({}, row)
        this.editForm.password = ''
        this.checkPassword = ''
      },
      // 获取用户列表
      getUsers () {
        this.listLoading = true
        this.$http('get', 'user', this.params)
        .then((data) => {
          this.userData = data.result.dataList
          var total = data.result.total % 10 === 0 ? parseInt(data.result.total / 10) : parseInt(data.result.total / 10) + 1
          this.totalPage = total
          this.listLoading = false
        })
      },
      handleCurrentChange (val) {
        this.params.page = val
        this.getUsers()
      },
      changeNum (stat, id) {
        this.$http('delete', 'user', {login_id: id, stat: stat})
          .then(() => {
            this.getUsers()
          })
      },
      // 显示新增界面
      handleAdd: function () {
        this.addFormVisible = true
        this.addForm = {login: '', user_type: '', password: '', checkPassword: ''}
        this.checkPassword = ''
      },
      // 添加
      addSubmit: function () {
        if (this.checkPassword !== this.addForm.password) {
          this.$message({
            message: '两次输入的密码不相同哦',
            type: 'error'
          })
        } else if (this.addForm.password === ' ') {
          this.$message({
            message: '请输入密码',
            type: 'error'
          })
        } else if (this.checkPassword === this.addForm.password) {
          this.addLoading = true
          this.$http('post', 'user', Object.assign(this.addForm, {name: this.addForm.login}))
            .then((data) => {
              this.addLoading = false
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.$refs['addForm'].resetFields()
              this.addFormVisible = false
              this.getUsers()
            })
        }
      },
      // 编辑
      editSubmit: function () {
        if (this.checkPassword !== this.editForm.password) {
          this.$message({
            message: '两次输入的密码不相同哦',
            type: 'error'
          })
        } else if (this.editForm.password === ' ') {
          this.$message({
            message: '请输入密码',
            type: 'error'
          })
        } else {
          this.editLoading = true
          this.$http('put', 'user', Object.assign(this.editForm, {type: this.editForm.user_type}))
            .then((data) => {
              this.editLoading = false
              this.$message({
                message: '提交成功',
                type: 'success'
              })
              this.$refs['editForm'].resetFields()
              this.editFormVisible = false
              this.getUsers()
            })
        }
      }
    },
    mounted () {
      this.getUsers()
      this.getLevelType()
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped leng='less'>
  .contain .contain-body {
    font-size:13px;
    padding-top: 0;
  }

  .all-cont{
    width:1124px;
    margin: 0 auto;
  }

  .bj-btn{
    border:0;
    width:19px;
    height:19px;
    margin-top: 10px;
    padding: 0;
  }
  i{
    color: #58b5ff;
    font-size: 18px;
  }

  .top-input{
     height: 45px;
     padding: 22px 0;
   }


  .user-cunt .el-input{
    width:57%;
  }
</style>
